import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Home, Gift, Film, MessageCircle, User } from 'lucide-react';

const TabBar = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const tabs = [
    { id: 'home', path: '/', icon: Home, label: '首页' },
    { id: 'exchange', path: '/exchange', icon: Gift, label: '交换' },
    { id: 'material', path: '/material-share', icon: Gift, label: '物料' },
    { id: 'movie', path: '/movie', icon: Film, label: '观影' },
    { id: 'messages', path: '/messages', icon: MessageCircle, label: '消息' },
    { id: 'profile', path: '/profile', icon: User, label: '我的' },
  ];

  return (
    <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around items-center h-14 px-2">
      {tabs.map((tab) => {
        const isActive = location.pathname === tab.path;
        const IconComponent = tab.icon;
        
        return (
          <div 
            key={tab.id}
            className={`flex flex-col items-center justify-center flex-1 py-1 ${isActive ? 'text-green-500' : 'text-gray-500'}`}
            onClick={() => navigate(tab.path)}
          >
            <IconComponent size={20} />
            <span className="text-xs mt-0.5">{tab.label}</span>
          </div>
        );
      })}
    </div>
  );
};

export default TabBar;